<template>
    <div>
      <div ref="myPage" class="my-graph" style="height:calc(100vh);">
        <RelationGraph ref="graphRef" :options="graphOptions">
          <template #node="{node}">
            <div class="c-round" style="width: 70px;height:70px;">
                <CircumIcon size="70px" :name="node.data.icon"/>
            </div>
          </template>
        </RelationGraph>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { defineComponent, ref, onMounted } from 'vue';
  import RelationGraph, { RGJsonData, RGOptions, RGNode, RGLine, RGLink, RGUserEvent, RelationGraphComponent } from 'relation-graph-vue3';
  import CircumIcon from "@klarr-agency/circum-icons-vue"; // Vue
  
  const graphRef = ref<RelationGraphComponent>();
  
  const graphOptions: RGOptions = {
      allowSwitchLineShape: true,
      allowSwitchJunctionPoint: true,
      defaultLineColor: 'rgba(255, 255, 255, 0.6)',
      defaultNodeColor: 'transparent',
      defaultNodeBorderWidth: 0,
      defaultNodeBorderColor: 'transpanret',
      defaultNodeFontColor: '#ffffff',
      defaultNodeShape: 0,
      toolBarDirection: 'h',
      toolBarPositionH: 'right',
      toolBarPositionV: 'bottom',
      defaultPolyLineRadius: 10,
      defaultLineShape: 6,
      defaultJunctionPoint: 'lr',
      lineUseTextPath: true,
      layout: {
          layoutName: 'tree',
          from: 'left',
          'min_per_width': 310,
          'min_per_height': 70
  
      }
  };
  
  onMounted(() => {
      showGraph();
  });
  
  const showGraph = async() => {
      const __graph_json_data: RGJsonData = {
          'rootId': 'a',
          'nodes': [
              { 'id': 'a', 'text': 'a', data: { icon: 'football' }},
              { 'id': 'b', 'text': 'b', data: { icon: 'fries' }},
              { 'id': 'b1', 'text': 'b1', data: { icon: 'fries' }},
              { 'id': 'b2', 'text': 'b2', data: { icon: 'fries' }},
              { 'id': 'b2-1', 'text': 'b2-1', data: { icon: 'fries' }},
              { 'id': 'b2-2', 'text': 'b2-2', data: { icon: 'fries' }},
              { 'id': 'c', 'text': 'c', data: { icon: 'delivery_truck' }},
              { 'id': 'c1', 'text': 'c1', data: { icon: 'delivery_truck' }},
              { 'id': 'c2', 'text': 'c2', data: { icon: 'delivery_truck' }},
              { 'id': 'c3', 'text': 'c3', data: { icon: 'delivery_truck' }}
          ],
          'lines': [
              { 'from': 'a', 'to': 'b', text: '虚线1', dashType: 1 },
              { 'from': 'b', 'to': 'b1', text: '虚线2', dashType: 2 },
              { 'from': 'b', 'to': 'b2', text: '虚线3', dashType: 3 },
              { 'from': 'b2', 'to': 'b2-1', text: '虚线4', dashType: 4 },
              { 'from': 'b2', 'to': 'b2-2', text: '正常线条' },
              { 'from': 'a', 'to': 'c', text: '线条动画1', animation: 1 },
              { 'from': 'c', 'to': 'c1', text: '线条动画2', animation: 2 },
              { 'from': 'c', 'to': 'c2', text: '线条动画3', animation: 3 },
              { 'from': 'c', 'to': 'c3', text: '线条动画4', animation: 4 }
          ]
      };
  
      const graphInstance = graphRef.value!.getInstance();
      await graphInstance.setJsonData(__graph_json_data);
      await graphInstance.moveToCenter();
      await graphInstance.zoomToFit();
  };
  
  </script>
  
  <style lang="scss" scoped>
  ::v-deep(.relation-graph) {
      .rel-map {
          background: none !important;
          .rel-node-shape-1 {
          }
      }
      .rel-toolbar{
          color: #ffffff;
          .c-current-zoom{
              color: #ffffff;
          }
      }
      .rel-node-shape-0 {
          display: flex;
          place-items: center;
          justify-content: center;
      }
      .rel-node-checked {
          box-shadow: 0 0 0 8px #fad148;
          svg {
              fill: #fad148
          }
      }
      .rel-node-flashing {
          animation: none;
      }
  }
  .my-graph{
    background: linear-gradient(to right, rgb(16, 185, 129), rgb(101, 163, 13));
  }
  </style>
  
  <style lang="scss">
  .my-line-style-1 .c-rg-line-checked {
    animation: my-line-anm1 1s infinite;
  }
  .my-line-style-2 .c-rg-line-checked {
    animation: my-line-anm2 1s infinite;
  }
  .my-line-style-3 .c-rg-line-checked {
    animation: my-line-anm3 1s infinite;
  }
  .my-line-style-4 .c-rg-line-checked {
    animation: my-line-anm4 1s infinite;
  }
  
  @keyframes my-line-anm1 {
    0% {
      stroke-dashoffset: 352px;
      stroke-dasharray: 5, 5, 5;
    }
    50% {
      stroke-dasharray: 5, 5, 5;
      stroke-dashoffset: 3px;
    }
    100% {
      stroke-dashoffset: 352px;
      stroke-dasharray: 5, 5, 5;
    }
  }
  @keyframes my-line-anm2 {
    from {
      stroke-dashoffset: 0;
      stroke-dasharray: 4,4,4;
    }
    to {
      stroke-dashoffset: 10px;
      stroke-dasharray: 20,20,20;
    }
  }
  @keyframes my-line-anm3 {
    0% { stroke-opacity: 1; }
    50% { stroke-opacity: 0.2; }
    100% { stroke-opacity: 1; }
  }
  @keyframes my-line-anm4 {
    0%{
      stroke-dasharray:0,100%;
    }
    100%{
      stroke-dasharray:100%,0;
    }
  }
  </style>
  